<template>
  <div class="addEditDialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%" @close="closeDialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="functionName" label="功能名称:">
          <el-input v-model="ruleForm.functionName" clearable placeholder="请输入功能名称">            
          </el-input>         
        </el-form-item>
        <!-- <el-form-item prop="functionCode" label="接口编码:">
          <el-input v-model="ruleForm.functionCode" clearable placeholder="请输入接口编码">            
          </el-input>         
        </el-form-item> -->
        <el-form-item prop="url" label="接口地址:">
          <el-input v-model="ruleForm.url" clearable placeholder="请输入接口地址">            
          </el-input>         
        </el-form-item>
         <el-form-item prop="requestMode" label="请求方式：">
             <el-select v-model="ruleForm.requestMode" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.statusEnum"
                :label="item.label"
                :value="item.statusEnum">
              </el-option>
            </el-select> 
           </el-form-item> 
          <el-form-item prop="timeout" label="请求时长:">
            <el-input v-model="ruleForm.timeout" type="number" clearable placeholder="请输入请求时长">           
            </el-input>   
            <span>/ms</span>                     
          </el-form-item> 
           <el-form-item  prop="remark" label="备注" >           
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>        
          </el-form-item>                    
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'showImg',
  data () {
    return {
      title:null,
     url:'',
      ruleForm: {
          functionName:null,
          functionCode:null,
          url:null,
          requestMode:null,
          timeout:null,          
          remark:null,
          thirdPartyId:null,
          dockingDetailId:null,         
        },   
      dialogVisible: false,           
      rules: {
        functionName: [
          { required: true, message: '不能为空', trigger: 'blur' }         
        ],
        // functionCode: [
        //   { required: true, message: '不能为空', trigger: 'blur' }         
        // ],
        url: [
          { required: true, message: '不能为空', trigger: 'blur' }         
        ],
        requestMode: [
          { required: true, message: '不能为空', trigger: 'blur' }         
        ],
         timeout: [
          { required: true, message: '不能为空', trigger: 'blur' }         
        ],
              
      },
       options: [{
          statusEnum: 'post',
          label: 'post'
        }, {
          statusEnum: 'get',
          label: 'get'
        }],
    }
  },
  methods: { 
    closeDialog(){
      this.dialogVisible=false;
    },
    loadDialogData(item,title,url,type){
      this.dialogVisible=true;   
       setTimeout(() => {
          this.title=title;
          this.url=url;            
          this.$refs['ruleFormref'].resetFields(); //重置  弹窗数据  
          if(type==1){
            this.ruleForm.thirdPartyId=item.thirdPartySystemDTO.thirdPartyId;
          }else{
            this.ruleForm.thirdPartyId=item.thirdPartyId;
             this.ruleForm.functionName=item.functionName;
             this.ruleForm.functionCode=item.functionCode;
             this.ruleForm.requestMode=item.requestMode;
             this.ruleForm.timeout=item.timeout;
             this.ruleForm.remark=item.remark;
             this.ruleForm.url=item.url;
             this.ruleForm.dockingDetailId=item.dockingDetailId
          }                         
        }, 10); 
    },
    submitForm(formName) {  
          this.ruleForm.timeout=parseInt(this.ruleForm.timeout); 
     
        this.$refs[formName].validate((valid) => {
          if (valid){     
                                                                                             
              this.$store.dispatch('postform',{param:this.ruleForm,url:this.url}).then(() => {
                if(this.addEdit.code==0){
                  this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  });               
                  this.dialogVisible=false;  
                       
                  this.$emit('fatherMethod'); 
                }else{
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'warning'
                  }); 
                }              
              }).catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  }); 
                 
              })                        
          } else {            
            return false;
          }
        });
      },
  
  },
  computed:{
    
    ...mapState(['list','addEdit'])
  },
  mounted(){   
      
        
  }
}
</script>

<style scoped>
.addEditDialog .el-select{
  width: 100%
}
.addEditDialog .el-form-item__content{
  position: relative;
}
.addEditDialog .el-form-item__content >span{
  position: absolute;
  right: 10px;
  top: 0px;
}

</style>
<style>
  
</style>
